<template>
    <CommonPage ref="productManageRef" :tableConfig="option" formKey="productManage"></CommonPage>
    <ProductManageAddorEdit v-if="dialog"  v-model="dialog" :type="openType" :info="rowInfo" :productList="productList" :types="types" @callback="productManageRef.resetTableData()"/>
</template>
<script setup>
import CommonPage from '@/components/CommonPage/index.vue'
import ProductManageAddorEdit from './components/ProductManageAddorEdit.vue'
import {getFundList, getProductcategoryList, chageUpOrDown, deleteProductManage} from '@/server/manage/product.js'
import {productStatus} from "@/utils/enum.js"
import {ElMessage, ElMessageBox} from "element-plus"
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router'
const dialog = ref(false)
const openType = ref()
const rowInfo = ref()
const types = ref([])
const productManageRef = ref()
const productList = ref([])
const router = useRouter()
const option = reactive({
    operationWidth: 200,
    formItems: [
        {label: '产品名称', prop: 'productName', type: 'input', show: true},
        {label: '分类', prop: 'productCategoryId', type: 'select', show: true, options: productList},
        {label: '状态', prop: 'productStatus', type: 'select', show: true, options: productStatus},
    ],
    buttons: [
        {label: "新增", icon: 'Plus', auth: '', handle: (event)=> {handleOpen('add')}},
        {label: "删除", icon: 'Delete', type: 'danger', handle: (event)=> {handleDel(event)}},
    ],
    options: [
        {label: '预览', handle: (event) => {handlePreview(event)}, isShow:() => {return true}},
        {label: '上架', handle: (event) => {handleStatus(event, 2)}, isShow:(row) => {return row.productStatus == 1}, type: "success"},
        {label: '下架', handle: (event) => {handleStatus(event, 1)}, isShow:(row) => {return row.productStatus == 2}, type: "warning"},
        {label: '编辑', handle: (event) => {handleOpen('edit', event)}, isShow:() => {return true}},
        {label: '删除', handle: (event) => {handleDel(event)}, isShow:() => {return true}, type: 'danger'}
    ]
})
// 新增 编辑
const handleOpen = (type, item) => {
    openType.value = type
    item && (rowInfo.value = item)
    dialog.value = true
}
// 修改状态
const handleStatus = (row, status) => {
    chageUpOrDown({id: row.id, upOrDown: status}).then(res => {
        productManageRef.value.getTableData()
        ElMessage({ message: "操作成功！", type: 'success'})
    })
}
//删除
const handleDel = (list) => {
    let ids = Array.isArray(list) ? list.map(item => item.id) : [list.id]
    ElMessageBox.confirm('您确定删除吗？','提示',
        {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}
    ).then(() => {
        deleteProductManage({ids: ids}).then(res => {
            ElMessage({ type: 'success', message: '删除成功！'})
            productManageRef.value.resetTableData()
        })
    })
    .catch()
}
// 获取产品分类列表
const getProductList = () => {
    getProductcategoryList({page: "1",limit: "99999", productCategoryStatus: "2"}).then(({page}) => {
        productList.value = (page.list||[]).map(item => {
            return {label: item.productCategoryName, value: item.id}
        })
    })
}
// 获取资金方列表
const getFunderList = () => {
    getFundList({page: "1",limit: "99999", fundStatus: "2"}).then(({page}) => {
        types.value = (page.list||[]).map(item => {
            return {label: item.fundName, value: item.id}
        })
    })
}
// 预览
const handlePreview = (row) => {
    localStorage.setItem('productPreview', JSON.stringify(row))
    router.push({name: 'productPreview'})
}
//初始化
const init = () => {
    getFunderList()
    getProductList()
}
init()
</script>